<template>
	<view class="heightbox">
		<view class="heightbox">
			<u-swiper :list="bannerlist" @click="banner" height="450rpx" imgMode="aspectFill"></u-swiper>
			<view class="header">
				<view class="headercontainer">
					<view class="flex justify-between align-center  pdx-20 pdy-20">
						<view class="flex flex-column align-center" v-for="(item, index) in firstNavlist" :key="index">
							<view
								class="subbox flex align-center justify-center"
								@click="itemFn(item)"
								:style="{ background: bannercolor[index] }"
							>
								<image :class="'subimg' + index" :src="imageURL + item.iconimage" />
							</view>
							<view class="subtitle">{{ item.name }}</view>
						</view>
					</view>

					<view class="flex justify-between pdx-30">
						<view
							class="flex flex-column align-center justify-center"
							v-for="(item, index) in secondNavlist"
							:key="index"
						>
							<image class="subicon" :src="imageURL + item.iconimage" @click="itemFn(item)"></image>
							<view class="icontitle">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="bottombox flex flex-column mgx-30">
				<view class="heightbox flex flex-column ">
					<view class="flex justify-center">
						<view class="flex-1 text-center ft-24" :class="active === 0 ? 'activeline' : 'mgt-14'" @click="checkTab(0)">
							供需动态
						</view>
						<view class="flex-1 text-center ft-24" :class="active === 1 ? 'activeline' : 'mgt-14'" @click="checkTab(1)">
							活动通知
						</view>
					</view>
					<view class="flex align-center mgt-10">
						<view class="flex-1 flex  justify-center"><view class="triangle" v-show="active === 0"></view></view>
						<view class="flex-1 flex  justify-center"><view class="triangle" v-show="active === 1"></view></view>
					</view>
					<view class="flex-1 listcontainer">
						<view v-for="(item, index) in contentlist" :key="index">
							<view class="flex px-4 align-center">
								<image class="headpoint" :src="item.avatar" />
								<view>{{ item.username }}</view>
							</view>
							<view class="pdx-60 ft-28 mgl-16" v-html="item.content"></view>
							<view class="bottomline mgb-10">
								<view class="flex ft-28  pdy-10 justify-between align-center">
									<view class="flex">
										<view class="time">{{ item.createtime | formatData }}.</view>
										<view @click="replyFn">回复</view>
									</view>

									<view class="pdr-20">
										<image
											class="fabulous"
											src=""
										/>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- <view class="flex-1 listcontainer pdx-20">
						<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn"
							:deleteTip="'确认删除？'" :cmData="commentData" v-if="commentData"></hb-comment>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { imgurl, urls } from '@/utils/constant'
import { getAdsById, gethomesad, getnavi } from '@/api/api.js'
export default {
	data() {
		return {
			imgurl: imgurl,
			imageURL: urls.requestURL,
			firstNavlist: [],
			secondNavlist: [],
			bannerlist: [],
			active: 0,
			bannercolor: ['#28b4d4', '#e13f33', '#9a5835', '#63c3a0'],
			contentlist: [],
			tablist: [
				{
					name: '供需动态'
				},
				{
					name: '活动通知'
				}
			]
		}
	},
	onLoad() {
		this.getBanner()
		this.getHomesad()
		this.getNavi()
	},
	filters: {
		formatData(dateTimeStamp) {
			let result
			// dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
			var minute = 1000 * 60 //把分，时，天，周，半个月，一个月用毫秒表示
			var hour = minute * 60
			var day = hour * 24
			var week = day * 7
			var halfamonth = day * 15
			var month = day * 30

			var now = new Date().getTime() //获取当前时间毫秒
			var diffValue = now - dateTimeStamp //时间差

			if (diffValue < 0) {
				return
			}

			var minC = diffValue / minute //计算时间差的分，时，天，周，月
			var hourC = diffValue / hour
			var dayC = diffValue / day
			var weekC = diffValue / week
			var monthC = diffValue / month

			if (monthC >= 1) {
				result = '' + parseInt(monthC) + '月前'
			} else if (weekC >= 1) {
				result = '' + parseInt(weekC) + '周前'
			} else if (dayC >= 1) {
				result = '' + parseInt(dayC) + '天前'
			} else if (hourC >= 1) {
				result = '' + parseInt(hourC) + '小时前'
			} else if (minC >= 1) {
				result = '' + parseInt(minC) + '分钟前'
			} else result = '刚刚'
			return result
			return lastdata
		}
	},
	methods: {
		routerPush(url) {
			uni.navigateTo({
				url: url
			})
		},
		async getBanner() {
			let id = 1
			const res = await getAdsById(id)
			if (res.code === 1) {
				// this.bannerlist = res.data.data;
				let list = res.data.data
				for (let i = 0; i < list.length; i++) {
					let img = this.imageURL + list[i].imageurl

					this.bannerlist.push({
						url: img,
						router: list[i].linkurl
					})
				}
			}
		},
		banner(data) {
			let bannerrouter = this.bannerlist[data].router
			uni.navigateTo({
				url: bannerrouter
			})
		},
		async getHomesad() {
			const res = await gethomesad()
			if (res.rows) {
				this.contentlist = res.rows
			}
		},
		checkTab(item) {
			this.active = item
		},
		async getNavi() {
			const res = await getnavi()

			this.firstNavlist = res.rows.splice(0, 4)
			this.secondNavlist = res.rows
		},
		replyFn() {
			this.routerPush('/pages/demand/reply')
		},
		itemFn(data) {
			let url = data.uri
			// let path = '/pages/land/land'
			uni.navigateTo({
				// url: path+'?id='+data.id
				url
			})
		}
	}
}
</script>

<style lang="scss">
.heightbox {
	height: 100%;
}
.headpoint {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.fabulous {
	width: 14px;
	height: 14px;
}
.bottomline {
	border-bottom: 1rpx solid #e4e1e1;
	margin-left: 78rpx;
}
.header {
	.headercontainer {
		background-color: #fff;
		width: calc(100% - 60rpx);
		height: 328rpx;
		position: absolute;
		right: 30rp;
		left: 30rpx;
		margin-top: -80rpx;
		border-radius: 40rpx;

		.subtitle {
			font-size: 24rpx;
			margin-top: 10rpx;
		}

		.subbox {
			width: 132rpx;
			height: 132rpx;
			background-color: #28b4d4;
			border-radius: 30rpx;
		}

		.subimg0 {
			width: 86rpx;
			height: 86rpx;
		}

		.subimg1 {
			width: 94rpx;
			height: 96rpx;
		}

		.subimg2 {
			height: 86rpx;
			width: 81rpx;
		}

		.subimg3 {
			width: 98rpx;
			height: 82rpx;
		}

		.hotspot {
			background-color: #e13f33;
		}

		.price {
			background-color: #9a5835;
		}

		.house {
			background-color: #63c3a0;
		}
	}

	.subicon {
		width: 50rpx;
		height: 50rpx;
	}

	.icontitle {
		font-size: 22rpx;
		color: #666;
		margin-top: 10rpx;
	}
}

.bottombox {
	margin-top: 280rpx;
	border-top: 1rpx solid #e6e6e6;
	height: 100%;
	border-radius: 20rpx;
	background: bottombox;
}

.activeline {
	border-top: 6rpx solid #55c7fb;
	color: #55c7fb;
	padding-top: 10rpx;
}

.text-center {
	text-align: center;
}

.listcontainer {
	height: 100%;
	background-color: #fff;
	border-radius: 20rpx;
}
.triangle {
	width: 0px;
	height: 0px;
	border-bottom: 20rpx solid #fff;
	border-left: 20rpx solid transparent;
	border-right: 20rpx solid transparent;
}
</style>
